<template>
  <div class="index-map" id="index-map">

  </div>
</template>
<script>
import { LineLayer, Marker, PointLayer, PolygonLayer, Scene } from '@antv/l7'
import {TencentMap} from "@antv/l7-maps";
import { getMapDialogDom } from '@/utils/utils'
export default {
  name: 'IndexMap',
  data(){
    return{
      scene:null
    }
  },
  methods:{
    initMap(){
      this.scene = new Scene({
        id: 'index-map',
        logoVisible: false,
        antialias: true,
        map: new TencentMap({
          zoom: 14.5,
          minZoom:14.5,
          maxZoom:14.5,
          center: [98.522015, 39.734010],
          rotateEnable: false,
          pitch: 0,
          mapStyleId: 'style6'
        })
      })
      const points=[
        // [98.52831,39.736234],
        // [98.523782,39.735992],
        // [98.523572,39.733608],
        // [98.522965,39.732012],
        // [98.522965,39.732012],
        // [98.52745,39.729159],
        // [98.52831,39.736234],
        [98.528638,39.743268],
        [98.52744,39.729113],
        [98.535031,39.725324],
        [98.538806,39.724225],
        [98.539872,39.723914],
        [98.540597,39.726456],
        [98.54141,39.732601],
        [98.542643,39.742654],
        [98.537845,39.743867],
        [98.528753,39.743326]
      ]
      const polygonLayer=new PolygonLayer().source({
        type:'FeatureCollection',
        features:[
          {
            type:'Feature',
            properties:[],
            geometry:{
              type:'Polygon',
              coordinates:[
                [...points]
              ]
            }
          }
        ]
      }).shape('fill').color('#22DFE9').style({
        opacity:0.3,
      })
      this.scene.addLayer(polygonLayer)
      const lineLayer=new LineLayer().source({
        type:'FeatureCollection',
        features:[
          {
            type:'Feature',
            properties:[],
            geometry:{
              type:'LineString',
              coordinates:[
                [...points]
              ]
            }
          }
        ]
      }).shape('line').color('#22DFE9').size(1)
      this.scene.addLayer(lineLayer)
      const center=[98.525627,39.733882]
      const textLayer=new PointLayer({zIndex:10}).source({
        type:'FeatureCollection',
        features:[
          {
            type:'Feature',
            properties: {
              name: '金泉路社区'
            },
            geometry: {
              type: 'Point',
              coordinates: center
            }
          }
        ]
      }).shape('name','text').color('#22DFE9').style({
        textAnchor:'center',
        spacing:2,
        padding:[1,1],
      }).size(16)
      this.scene.addLayer(textLayer)
      const refersLineLayer=new LineLayer().source({
        type:'FeatureCollection',
        features:[
          {
            type:'Feature',
            properties:[],
            geometry:{
              type:'LineString',
              coordinates:[
                [
                  [98.526548,39.740984],
                  [98.523798,39.738999],
                ]
              ]
            }
          }
        ]
      }).shape('line').color('#22DFE9').size(1)
      this.scene.addLayer(refersLineLayer)

      const maker=new Marker({
        element:getMapDialogDom(1),
        anchor:'bottom'
      }).setLnglat([98.512489,39.729313])
      this.scene.addMarker(maker)
    }
  },
  mounted() {
    this.initMap();
  }
}
</script>
<style lang="scss">
.index-map{
  .map-dialog{
    width: 360px;
    height: 230px;
    background: url("~@/assets/images/map-dialog-background.png") no-repeat center;
    background-size: 100% 100%;
    .dialog-title{
      color: #22DFE9;
      height: 36px;
      display: flex;
      align-items: center;
      padding-left: 20px;
      font-weight: bold;
    }
    .dialog-body{
      width: 100%;
      padding: 0 10px;
      height: calc(100% - 36px);
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: space-between;
      .info-item{
        width: calc(100%/3 - 10px);
        height: calc(50% - 10px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        .text{
          color: #22DFE9;
          font-size: 14px;
          margin-bottom: 15px;
        }
        .value{
          color: #22DFE9;
          font-size: 28px;
          font-family: 冷酷体;
        }
      }
      .info-item.full{
        width: calc(100%/4 - 10px);
      }
    }
  }
}
</style>
<style scoped lang="scss">
.index-map{
  width: 100%;
  height: 100%;
}
</style>
